<template>
  <div class="comment-content__body"
       id="comments">
    <div class="comment-content__body_header">
      <span>回复数量：{{ count }}</span>
    </div>
    <div class="comment-content__body_content">
      <template v-if="list.length">
        <div class="comment_card"
             v-for="comment in list"
             :key="comment.id">
          <div class="comment_card__header">
            <el-avatar :src="comment.user.avatar.url"></el-avatar>
            <div class="header-info__body">
              <span class="info-name">{{comment.user.name}}</span>
              <span class="info-time">{{comment.created_at | timeFilter('before')}}</span>
            </div>
          </div>
          <div class="comment_card__content">
            {{comment.content}}
          </div>
          <div class="comment_card__footer">
            <el-button type="text"
                       class="reply"
                       @click="replyComment(comment)">回复</el-button>
            <el-button type="text"
                       class="report"
                       @click="report(comment)">举报</el-button>
          </div>
          <div class="comment_children_content"
               v-if="comment.children.length">
            <div class="comment_card_child"
                 v-for="child in comment.children"
                 :key="child.id">
              <div class="comment_card_child__header">
                <el-avatar :src="child.user.avatar.url"></el-avatar>
                <div class="header-info__body">
                  <span class="info-name">{{child.user.name}}</span>
                  <span class="info-time">{{child.created_at | timeFilter('before')}}</span>
                </div>
              </div>
              <div class="comment_card_child__content">
                {{child.content}}
              </div>
              <div class="comment_card_child__footer">
                <el-button type="text"
                           class="reply"
                           @click="replyComment(child)">回复</el-button>
                <el-button type="text"
                           class="child-report"
                           @click="report(child)">举报</el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="comment_pagination__body">
          <el-pagination background
                         layout="prev, pager, next"
                         @current-change="fetch"
                         :current-page.sync="query.page"
                         :page-size="query.limit"
                         hide-on-single-page
                         :total="total">
          </el-pagination>
        </div>
      </template>
      <template v-else>
        <div class="comment__empty"
             v-show="allowComment">
          评论区空空如也~
        </div>
      </template>
    </div>
    <div class="comment-content__body_footer"
         ref="replyForm">
      <template v-if="allowComment">
        <div class="comment-reply-content">
          <div class="comment-user-comment__body"
               v-show="replyCommentForm.reply_id">
            <div class="reply-user-header">
              <div class="reply-user">@{{ replyCommentForm.name }}</div>
              <div class="reply-cancel"
                   @click="cancelReply">取消</div>
            </div>
            <div class="reply-user-content">
              #{{ replyCommentForm.content }}
            </div>
          </div>
          <el-form ref="commentForm"
                   :model="form"
                   label-width="0px"
                   :rules="rules">
            <el-input v-model="form.reply_id"
                      style="display: none"></el-input>
            <el-form-item prop="content">
              <el-input type="textarea"
                        ref="replyBody"
                        :rows="4"
                        placeholder="支持部分markdown语法，请勿发布敏感、负能量、不友善等内容..."
                        v-model="form.content">
              </el-input>
            </el-form-item>
          </el-form>
          <div class="submit-btn">
            <!-- <span>ctrl+enter</span> -->
            <el-button type="primary"
                       size="small"
                       :loading="loading"
                       @click="reply">发布</el-button>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="comment_forbid">
          该文章关闭了评论
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { getScrollTop, scrollToSlow } from '@/utils/browser'

export default {
  name: 'comment-body',
  props: {
    item_id: {
      type: String,
      default: undefined
    },
    can_comment: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      query: {
        limit: 12,
        page: 1
      },
      form: {
        content: undefined,
        reply_id: undefined
      },
      replyCommentForm: {},
      watchScroll: false,
      loading: false,
      rules: {
        content: [
          { required: true, message: '内容不能为空' }
        ]
      }
    }
  },
  mounted () {
    this.fetch()
  },
  computed: {
    ...mapGetters('comment', ['list', 'total', 'count']),
    ...mapGetters('login', ['logined']),
    ...mapGetters('home', ['comment']),
    allowComment () {
      return this.can_comment && this.comment
    }
  },
  methods: {
    ...mapActions('comment', ['fetchList', 'store']),
    async fetch () {
      const params = { ...this.query, id: this.item_id }
      await this.fetchList(params)
    },
    replyComment (comment) {
      if (!this.logined) {
        this.$message({
          message: '登录后才能回复',
          type: 'warning',
          offset: 10
        });
        return;
      }
      const { user: { id: user_id, name }, id: reply_id, content } = comment
      this.replyCommentForm = { user_id, name, reply_id, content }
      this.form.reply_id = reply_id
      this.watchScroll = getScrollTop()
      scrollToSlow(this.$refs.replyForm.offsetTop)
      this.$refs.replyBody.focus()
    },
    cancelReply () {
      scrollToSlow(this.watchScroll)
      this.clearReply()
    },
    clearReply () {
      this.replyCommentForm = {}
      this.form.reply_id = undefined
      this.watchScroll = false
    },
    report (comment) {
      this.$message({
        message: '举报成功，管理员将尽快处理',
        type: 'success',
        offset: 10
      });
    },
    async reply () {
      await this.$refs.commentForm.validate()
      const { item_id, form, store } = this
      await store({ item_id, ...form })
      await this.$refs.commentForm.resetFields()
      this.$message({
        message: '回复成功',
        type: 'success',
        offset: 10
      });
      if (this.watchScroll) {
        scrollToSlow(this.watchScroll)
      }
      this.clearReply()
    }
  }
}
</script>

<style lang="scss" scoped>
@import "./index.scss";

.el-form-item {
  margin-bottom: 10px;
}
</style>